<template>
  <div class="mainbg">
    <div class="mainbox">
      <h1>软件传媒信息平台</h1>
      <div class="box1">
        <div class="titleLine">欢迎<div class="tag">{{user.status}}</div>{{user.name}}<br>

        </div>
        <div class="itemBox">
          <div class="item" @click="go('/work/')">
            <img src="https://portal-remote.haust.edu.cn/img/myTodo.1045fc3e.png" />
            <div>
              <div>我的事务</div>
            </div>
          </div>

          <div class="item" @click="go('/message/')">
            <img
              src="https://i.haust.edu.cn/portal-minio/service/%E8%92%B2%E5%85%AC%E8%8B%B1%E8%AF%84%E8%AE%BA%402x-1629702824309.png" />
            <div>
              <div>我的稿件</div>
            </div>
          </div>
        </div>
        <div class="titleLine">
          <span>推荐服务</span>
        </div>
        <div class="tools1">
          <div class="toolCard" @click="go('rl')">
            <img src="../assets/icon/9.png" />
            <span>部门日历</span>
          </div>
          <div class="toolCard" @click="go('ps')">
            <img src="../assets/icon/2.png" />
            <span>在线ps</span>
          </div>
          <div class="toolCard" @click="gugugu" v-if="false">
            <img src="../assets/icon/1.png" />
            <span>签到功能</span>
          </div>
          <div class="toolCard" @click="gugugu" v-if="false">
            <img src="../assets/icon/1.png" />
            <span>非常5分钟
            </span>
          </div>
          <div class="toolCard" @click="gugugu" v-if="false">
            <img src="../assets/icon/1.png" />
            <span>图文直连</span>
          </div>
          <div class="toolCard" @click="gugugu" v-if="false">
            <img src="../assets/icon/1.png" />
            <span>快速点名</span>
          </div>
          <div class="toolCard" onclick="window.location.reload()">
            <img src="../assets/icon/7.png" />
            <span>版本刷新</span>
          </div>
        </div>

        <div class="titleLine">
          <span>个人管理</span>
        </div>
        <div class="tools1">
          <div class="toolCard" @click="go('/file/myfile')">
            <img src="../assets/icon/4.png" />
            <span>我的文件</span>
          </div>
          <div class="toolCard" @click="gugugu" v-if="false">
            <img src="../assets/icon/1.png" />
            <span>修改密码</span>
          </div>
          <div class="toolCard" @click="gugugu" v-if="false">
            <img src="../assets/icon/1.png" />
            <span>功能设置
            </span>
          </div>
          <div class="toolCard" @click="xxt">
            <img src="../assets/icon/1.png" />
            <span>学习通绑定</span>
          </div>
          <div class="toolCard" @click="quit">
            <img src="../assets/icon/5.png" />
            <span>退出登录</span>
          </div>
        </div>
        <div class="titleLine">
          <span>v2.1更新说明</span>
        </div>
        <div class="tools1">
          <ol>
            <li>恢复受攻击的系统</li>
            <li>正式上线运行</li>
            <li>新媒体部干事试点运营</li>
          </ol>
        </div>
        <div class="titleLine">
          <span>画大饼</span>
        </div>
        <div class="tools1">
          <ul>
            <li>上线简易传媒邮箱客户端</li>
            <li>上线官Q稿状态管理</li>
            <li>上线协同编辑</li>
            <li>对事务上线结项功能，结项事务单独展示</li>
            <li>上线双屏协作</li>
          </ul>
        </div>
        <div align="center"><img src="../assets/icon/logo.png" width="80"></div>
      </div>
    </div>
    <br>
  </div>
  </div>
</template>

<script>
  import user from "../api/user.js"
  export default {
    data() {
      return {
        user: {}
      }
    },
    methods: {
      go(router) {
        this.$router.push(router)
      },
      xxt() {},
      gugugu() {
        this.$message.error('暂未开放');
      },
      quit() {
        localStorage.clear()
        this.$router.replace("/")
      }
    },
    created() {
      this.user = user.getMyInfo()
      document.documentElement.style = ""
    }
  }
</script>

<style>
  h1 {
    font-size: 2.1em;
    text-align: center;
    color: white;
    padding-top: 20px;
  }

  .mainbg {
    background: url("https://pic.imgdb.cn/item/62fe07d416f2c2beb14e7b57.jpg") 0% 0% / 100% no-repeat;
  }

  .mainbox {
    width: 100%;
    height: 100%;
  }

  .box1 {
    width: 80%;
    margin-left: 10%;
    background-color: white;
    margin-top: 15px;
    border-radius: 15px;
    box-shadow: 0 4px 20px 0 rgb(226 234 242 / 50%);
  }

  .titleLine {
    padding: 30px;
    padding-bottom: 15px;
  }

  .tag {
    background-color: blueviolet;
    font-size: 12px;
    font-weight: bold;
    border-radius: 8px;
    color: white;
    padding: 2px 7px;
    display: block;
    display: inline-block;
  }

  .titleLine>span {
    padding: 5px;
    border-bottom: 2px solid cadetblue;
  }

  .tools1 {
    display: flex;
    width: 80%;
    margin-left: 10%;
    margin-top: 20px;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: stretch;
  }

  .toolCard {
    display: flex;
    align-items: center;
    margin-left: 30px;
  }

  .toolCard img {
    width: 46px;
    height: 46px;
    margin-right: 10px;
  }

  .itemBox {
    width: 80%;
    margin-left: 10%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .item {
    width: 40%;
    box-shadow: 0 4px 20px 0 rgb(226 234 242 / 50%);
    padding: 20px;
    display: flex;
    justify-content: space-around;
    align-items: center
  }

  .item img {
    width: 64px;
    height: 64px
  }

  @media screen and (max-width:480px) {
    .item {
      width: 90%;
    }
  }
</style>
